import { Table, message, Popconfirm, Space, Modal, Row, Col, Form, Input, Checkbox, Pagination, Statistic, Card } from "antd";
import { useModel, Outlet, useLocation, history } from "umi";
import { Card as SemiCard, ButtonGroup, Button, Descriptions } from "@douyinfe/semi-ui";
import { IconRefresh, IconPlusCircle, IconDelete, IconEdit, IconEyeOpened, IconChainStroked } from "@douyinfe/semi-icons";
import { useReactive } from "ahooks";
import { useEffect, useState } from "react";

import ChooseScheme from "../components/recharge/ChooseScheme";

const DashboardPage = () => {
    const { windowInnerHeight } = useModel("global");
    const { setModalVisible, setModalTitle, setModalWidth, setModalComponent } = useModel("global.modal");

    const state = useReactive({
        mechantInfo: [],
        schemes: [],
        selectScheme: { scUuid: 123213, scName: "元旦方案", scStti: "2023.01.01", scKeti: "7天" },
        pageSize: 15,
    });

    const loadData = () => {
        state.mechantInfo = {
            orUuid: 1231231,
            mcUuid: 3213212,
            mcName: "国庆优惠方案",
            mchID: "后会发生京东卡恢复健康萨克很健康三  ",
        };
    };

    useEffect(() => {
        loadData();
    }, []);

    const openChooseMerchant = () => {
        setModalTitle("选择绑定的小程序");
        setModalWidth(900);
        setModalComponent(<ChooseScheme reloadDate={loadData} />);
        setModalVisible(true);
    };

    const cardBodyHeight = windowInnerHeight - 90 - 20 - 54;

    return (
        <div style={{ padding: 10 }}>
            <Row gutter={10}>
                <Col span={8}>
                    <SemiCard
                        title={<span style={{ lineHeight: "32px", fontSize: 15 }}>当前充值方案</span>}
                        headerStyle={{ padding: "10px 14px" }}
                        shadows="always"
                        bordered={false}
                        size="default"
                        bodyStyle={{ padding: "0 10px", height: cardBodyHeight, overflow: "auto" }}
                        headerExtraContent={
                            <ButtonGroup>
                                <Button icon={<IconChainStroked />} onClick={openChooseMerchant}></Button>
                                <Button icon={<IconRefresh />} onClick={loadData}></Button>
                            </ButtonGroup>
                        }
                    >
                        <Space direction="vertical" style={{ width: "100%" }}>
                            <Card title="方案详情" size="small">
                                <Descriptions>
                                    <Descriptions.Item itemKey="方案名称">{state.mechantInfo.mcName}</Descriptions.Item>
                                    <Descriptions.Item itemKey="方案描述">{state.mechantInfo.mchID}</Descriptions.Item>
                                    <Descriptions.Item itemKey="使用日期">2023.10.10</Descriptions.Item>
                                    <Descriptions.Item itemKey="启用时长">{state.selectScheme.scKeti}</Descriptions.Item>
                                </Descriptions>
                            </Card>

                            <Card title="方案明细" size="small" bodyStyle={{ padding: 0 }}>
                                <Table
                                    loading={state.loading}
                                    size="small"
                                    bordered={false}
                                    dataSource={[{ scUuid: 21231, scMone: 50, scFree: 200, scZhec: "90%" }]}
                                    rowKey="oaarRole"
                                    pagination={false}
                                >
                                    <Table.Column title="序号" align="center" width={60} render={(_, r, i) => i + 1} />
                                    <Table.Column title="充值金额" dataIndex="scMone" align="left" />
                                    <Table.Column title="赠送金额" dataIndex="scFree" align="center" />
                                    <Table.Column title="享受折扣" dataIndex="scZhec" align="center" />
                                    {/* <Table.Column title="赠送商品" dataIndex="oaarType" align="center" /> */}
                                </Table>
                            </Card>
                        </Space>
                    </SemiCard>
                </Col>
                <Col span={16}>
                    <SemiCard
                        title={<span style={{ lineHeight: "32px", fontSize: 15 }}>当前方案充值记录</span>}
                        headerStyle={{ padding: "10px 14px" }}
                        shadows="always"
                        bordered={false}
                        size="default"
                        bodyStyle={{ padding: 30, height: cardBodyHeight, overflow: "auto" }}
                        headerExtraContent={
                            <ButtonGroup>
                                <Button icon={<IconRefresh />} onClick={loadData}></Button>
                            </ButtonGroup>
                        }
                    >
                        <div style={{ padding: 20, backgroundColor: "#F8F8F8" }}>
                            <Row gutter={16}>
                                <Col span={6}>
                                    <Card bordered={false} hoverable>
                                        <Statistic
                                            title="充值总额"
                                            value={43580.28}
                                            precision={2}
                                            valueStyle={{
                                                color: "#cf1322",
                                            }}
                                            //   prefix={<ArrowUpOutlined />}
                                            suffix="元"
                                        />
                                    </Card>
                                </Col>
                                <Col span={6}>
                                    <Card bordered={false} hoverable>
                                        <Statistic
                                            title="充值总数"
                                            value={67}
                                            precision={0}
                                            valueStyle={{
                                                color: "#3f8600",
                                            }}
                                            //   prefix={<ArrowDownOutlined />}
                                            suffix="次"
                                        />
                                    </Card>
                                </Col>
                                <Col span={6}>
                                    <Card bordered={false} hoverable>
                                        <Statistic
                                            title="充50享9.0折"
                                            value={67}
                                            precision={0}
                                            valueStyle={{
                                                color: "#3f8600",
                                            }}
                                            //   prefix={<ArrowDownOutlined />}
                                            suffix="次"
                                        />
                                    </Card>
                                </Col>
                                <Col span={6}>
                                    <Card bordered={false} hoverable>
                                        <Statistic
                                            title="充100返10享9.0折"
                                            value={67}
                                            precision={0}
                                            valueStyle={{
                                                color: "#3f8600",
                                            }}
                                            //   prefix={<ArrowDownOutlined />}
                                            suffix="次"
                                        />
                                    </Card>
                                </Col>
                            </Row>
                        </div>
                        <Table bordered={false} size="small" dataSource={[1]} rowKey="ciUuid" pagination={false} style={{ marginTop: 1 }}>
                            <Table.Column title="顺序" align="center" width={60} render={(_, r, i) => i + 1} />
                            <Table.Column title="充值方案" dataIndex="ciName" key="ciName" align="left" />
                            <Table.Column title="充值时间" dataIndex="ciName" key="ciName" align="left" render={(_, r) => (_ ? UTCTimeToLocal(_) : "")} />
                            <Table.Column title="充值客户" dataIndex="ciName" key="ciName" align="left" />
                            <Table.Column title="分享客户" dataIndex="ciName" key="ciName" align="left" />
                            <Table.Column title="分享员工" dataIndex="ciName" key="ciName" align="left" />
                        </Table>
                        <div style={{ display: "flex", justifyContent: "space-between", height: 48, borderTop: "1px solid #ccc" }}>
                            <div></div>
                            <div style={{ marginTop: 12 }}>
                                <Pagination
                                    total={state.totalCount}
                                    showTotal={(total, range) => `当前显示第 ${range[0]}-${range[1]} 条，共 ${total} 条`}
                                    pageSize={state.pageSize}
                                    current={state.page}
                                    showSizeChanger={false}
                                    onChange={(page) => (state.page = page)}
                                />
                            </div>
                        </div>
                    </SemiCard>
                </Col>
            </Row>
        </div>
    );
};

export default DashboardPage;
